<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>ws-serve</title>
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
  <link rel="stylesheet" href="https://res.wx.qq.com/t/wx_fed/weui-source/res/2.5.16/weui.min.css">
  <script type="text/javascript" src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.19/weui.min.js"></script>
  <style>
{{!-- 公共样式  ================开始 --}}
    * {
      margin: 0;
      padding: 0;
    }

    .mr5{
      margin-right: 5px;
    }

    .mr10{
      margin-right: 10px;
    }

    .mr20{
      margin-right: 20px;
    }

    .icon{
      width: 16px;
      height: 100%;
    }

    .weui-btn_overlay{
      
    color: var(--weui-BRAND);
    background-color: #ffffff;
    }
{{!-- 公共样式  ================结束 --}}

    .flex1{
      flex: 1;
    }

    .header{
      padding: 8px 24px;
      display: flex;
      align-items: center;
    }

    .header .btns{
      
    }

    .client-list {
      padding: 8px 16px;
    }

    .client-list-item {
      padding: 8px 16px;
      background-color: var(--weui-BG-0);
      border-radius: 4px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
    }

    .client-list-item__body {
      flex: 1;
    }

    .client-list-item__body span {
      display: inline-block;
    }

    .client-list-item__id {
      min-width: 250px;
      margin-right: 18px;
    }
  </style>
</head>

<body>
  <section>
    <div class="header">
      <div class="flex1">
        <span>在线客户端数量：<span style="font-size:1.4rem;">{{clients.length}}</span></span>
      </div>
      <div class="btns">
        <a href="/client" target="_blank" role="button" class="mr20">
          客户端示例
          <svg t="1694749785252" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1587" width="200" height="200"><path d="M583.4 721.5L417.8 887.1c-37.7 38.2-99.3 38.6-137.5 0.9s-38.6-99.3-0.9-137.5l0.9-0.9L445.9 584c38.2-37.7 99.8-37.3 137.5 0.9 37.4 37.9 37.4 98.8 0 136.6z" fill="#1792E5" p-id="1588"></path><path d="M341.3 924.6c-134 0-242.5-108.6-242.5-242.5 0-64.3 25.5-125.9 71-171.4l115.3-115.3c11.8-11.8 31-11.9 42.9 0 11.8 11.8 11.9 31 0 42.9L212.6 553.5c-71 71-71 186.2 0 257.2 70.9 70.9 186.3 70.9 257.2 0l115.3-115.3c11.8-11.8 31-11.8 42.9 0 11.8 11.8 11.8 31 0 42.9L512.7 853.5c-45.4 45.7-107.1 71.2-171.4 71.1z" fill="#424242" p-id="1589"></path><path d="M341.7 936.6h-0.4c-68 0-131.9-26.5-180-74.6-48.1-48.1-74.5-112-74.5-179.9 0-33.6 6.5-66.3 19.4-97.3 12.8-31 31.4-58.8 55.2-82.5L276.7 387c16.5-16.5 43.4-16.5 59.9 0s16.5 43.4 0 59.9L221.1 562c-66.2 66.2-66.2 174 0 240.2 66.2 66.2 174 66.2 240.2 0l115.3-115.3c16.4-16.4 43.3-16.5 59.8 0s16.5 43.3 0.1 59.9L521.2 862c-23.7 23.8-51.4 42.4-82.5 55.3-30.9 12.8-63.5 19.3-97 19.3z m-35.1-538.1c-4.7 0-9.4 1.8-13 5.4L178.3 519.2c-43.5 43.5-67.5 101.4-67.5 162.9 0 127.1 103.4 230.5 230.5 230.5h0.4c61.5 0 119.2-24 162.5-67.6l115.3-115.2c7.1-7.2 7.1-18.8 0-25.9-7.2-7.1-18.8-7.1-25.9 0L478.3 819.2c-75.6 75.6-198.6 75.6-274.2 0s-75.6-198.6 0-274.2l115.4-115.2c7.1-7.1 7.1-18.8 0-25.9-3.6-3.6-8.3-5.4-12.9-5.4zM718.8 634.9c-16.7 0-30.3-13.5-30.3-30.3 0-8.1 3.2-15.8 8.9-21.5l115.3-115.3c71.4-70.6 72.1-185.7 1.6-257.2s-185.7-72.1-257.2-1.6l-1.6 1.6L440.2 326c-11.8 11.8-31 11.8-42.9 0-11.8-11.8-11.8-31 0-42.9l115.3-115.3c95.1-92.3 246.7-91.2 340.4 2.5s94.8 245.3 2.5 340.4L740.3 626c-5.7 5.7-13.4 8.9-21.5 8.9z" fill="#424242" p-id="1590"></path><path d="M718.8 646.9c-23.3 0-42.3-19-42.3-42.3 0-11.3 4.4-22 12.4-30l115.3-115.3c66.6-65.9 67.3-173.6 1.5-240.3-65.7-66.6-173.5-67.3-240.2-1.5l-116.8 117c-16.4 16.4-43.3 16.5-59.8 0s-16.5-43.3-0.1-59.9l115.5-115.5c48.3-46.9 111.9-72.4 179.2-71.9 67.3 0.5 130.5 27 178.1 74.5 47.6 47.6 74 110.8 74.5 178.1s-25 130.9-71.9 179.2l-0.1 0.1-115.3 115.4c-8 8-18.7 12.4-30 12.4zM685 144.6c50.1 0 100 19.2 137.8 57.5 36.3 36.9 56.2 85.7 55.9 137.4-0.3 51.8-20.8 100.3-57.6 136.7L705.9 591.6c-3.5 3.5-5.4 8.1-5.4 13 0 10.1 8.2 18.3 18.3 18.3 4.9 0 9.5-1.9 13-5.4l115.1-115.2c87.2-89.9 86.1-235-2.4-323.5S610.9 89.2 521 176.3L405.8 291.6c-7.1 7.2-7.1 18.8 0 25.9 7.2 7.1 18.8 7.1 25.9 0l116.9-117c37.8-37.3 87.1-55.9 136.4-55.9z" fill="#424242" p-id="1591"></path><path d="M384.1 669.6c-16.7 0-30.3-13.6-30.3-30.3 0-8 3.2-15.7 8.9-21.4l257.2-257.2c12.1-11.6 31.3-11.2 42.9 0.9 11.2 11.7 11.2 30.2 0 41.9L405.5 660.7c-5.7 5.7-13.4 8.9-21.4 8.9z" fill="#424242" p-id="1592"></path><path d="M384.1 674.6c-19.5 0-35.3-15.8-35.3-35.3 0-9.4 3.7-18.3 10.4-24.9l257.3-257.3c6.8-6.5 15.8-10 25.2-9.8 9.4 0.2 18.2 4.1 24.8 10.9a35.21 35.21 0 0 1 0 48.8l-0.1 0.1L409 664.2c-6.6 6.7-15.5 10.4-24.9 10.4z m239.3-310.3L366.2 621.4c-4.8 4.8-7.4 11.1-7.4 17.9 0 14 11.3 25.3 25.3 25.3 6.7 0 13.1-2.6 17.9-7.4L659.2 400c9.4-9.8 9.3-25.2 0-34.9-4.7-4.9-11-7.7-17.8-7.8-6.7-0.2-13.1 2.3-18 7z" fill="#424242" p-id="1593"></path></svg>
        </a>
        <a id="allRefresh" href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_primary">全部刷新</a>
      </div>
    </div>
  </section>
  <section>
    <div class="client-list">
      {{#each clients}}
      {{#with this as | client |}}
        <div class="client-list-item">
        <div class="client-list-item__body">
          <span class="client-list-item__id">ID: {{this.id}}</span>
          <span class="client-list-item__title">Address: {{this.address}}</span>
        </div>

        <div class="btns">
          {{#if events}}
          <span style="margin-left: 16px;margin-right: 4px;">client registered events: </span>
          {{#each events }}
            <a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_overlay btnByClientRegister" 
            data-id="{{client.id}}" data-event="{{this.event}}" data-event-json='{{{toJSON this}}}'>{{this.event}}</a>
          {{/each}}
          <span style="margin-right: 10px;"> </span>
          {{/if}}

          <span style="margin-left: 16px;margin-right: 4px;">build in events: </span>
          <a href="javascript:" role="button" class="weui-btn weui-btn_mini weui-btn_primary weui-wa-hotarea btnRefresh" data-id="{{this.id}}">刷新</a>
        </div>
      </div>
      {{/with}}
      {{/each}}

      {{#unless clients}}
        <div class="weui-loadmore weui-loadmore_line">
            <span class="weui-loadmore__tips">暂无数据</span>
        </div>
      {{/unless}}
    </div>
  </section>

  <script>
    var $each = (arr, fallback) => {
      for (let i = 0; i < arr.length; i++) {
        fallback(arr[i], i)
      }
    }
    var btnRefreshs = document.getElementsByClassName("btnRefresh");
    for (let i = 0; i < btnRefreshs.length; i++) {
      let item = btnRefreshs[i]
      item.addEventListener('click', () => {
        let id = item.dataset.id;
        console.log(item.dataset.id)
        fetch(`/client/${id}/reload`)
          .then((response) => response.json())
          .then((data) => {
            console.log(data)
            if(data.status == 200){
              weui.toast("操作成功！", 800)
            } else {
              weui.topTips(data.message, 3000);
            }
          });
      })
    }
    
    document.getElementById("allRefresh").addEventListener('click', ()=>{
      for (let i = 0; i < btnRefreshs.length; i++) {
        let item = btnRefreshs[i]
        item.click()
      }
    })

    var btnByClientRegisters = document.getElementsByClassName("btnByClientRegister");
    $each(btnByClientRegisters, (item)=>{
      item.addEventListener('click', () => {
        let id = item.dataset.id;
        console.log(item.dataset.eventJson)
        let data = JSON.parse(item.dataset.eventJson);
        console.log(item.dataset.id)
        fetch(`/client/${id}/event`, {
          method: "POST", // or 'PUT'
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(data),
        })
          .then((response) => response.json())
          .then((data) => {
            console.log(data)
            if(data.status == 200){
              weui.toast("操作成功！", 800)
            } else {
              weui.topTips(data.message, 3000);
            }
          });
      })
    })

    //setTimeout(()=>{
    //  location.reload()
    //}, 3000)
  </script>
</body>

</html>